<template>
  <div style="overflow-y: scroll; flex-grow: 1; position: fixed; left: 50px; bottom: 0; height: calc(100% - 220px);">
    <el-radio-group v-model="astroDay" @change="getAstro">
      <el-radio-button label="today">今日运势</el-radio-button>
      <el-radio-button label="tomorrow">明日运势</el-radio-button>
      <el-radio-button label="week">本周运势</el-radio-button>
      <el-radio-button label="month">本月运势</el-radio-button>
      <el-radio-button label="year">年度运势</el-radio-button>
      <el-radio-button label="love">爱情运势</el-radio-button>
    </el-radio-group>

    <el-select v-model="astroName" @change="getAstro">
      <el-option
        v-for="item in astroOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.time }}</span>
      </el-option>
    </el-select>

    <el-descriptions
      v-loading="contentLoading"
      v-if="astroVisable"
      :column="3"
      :colon="false"
      class="margin-top"
      direction="vertical">
      <el-descriptions-item span="3">
        <div style="display: inline-block">
          <img :src="'/image/' + astroName + '.png'">
        </div>
        <div style="display: inline-block;">
          <p v-if="astro" style="font-weight: 900; font-size: 75px; margin: auto "> {{ astroName }} </p>
          <p v-if="astro" style="font-weight: 900; font-size: 30px; margin: auto "> {{ astro.beginMonth + "月" + astro.beginDay + "日" + " - " + astro.endMonth + "月" + astro.endDay + "日" }} </p>
        </div>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.generalLevel" :content-style="{'text-align': 'left', 'font-weight': '800'}" label="综合指数">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">综合指数</el-tag></span>
        <el-rate v-model="astro.generalLevel" disabled show-score text-color="#ff9900" score-template="{value}"/>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.loveLevel" :content-style="{'text-align': 'left'}" label="爱情指数">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">爱情指数</el-tag></span>
        <el-rate v-model="astro.loveLevel" disabled show-score text-color="#ff9900" score-template="{value}"/>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.careerLevel" :content-style="{'text-align': 'left'}" label="事业指数">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">事业指数</el-tag></span>
        <el-rate v-model="astro.careerLevel" disabled show-score text-color="#ff9900" score-template="{value}"/>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.richLevel" :content-style="{'text-align': 'left'}" label="财富指数">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">财富指数</el-tag></span>
        <el-rate v-model="astro.richLevel" disabled show-score text-color="#ff9900" score-template="{value}"/>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.healthLevel" :content-style="{'text-align': 'left'}" label="健康指数">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">健康指数</el-tag></span>
        <el-rate v-model="astro.healthLevel" disabled show-score text-color="#ff9900" score-template="{value}"/>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.businessLevel" :content-style="{'text-align': 'left'}" label="吹牛指数">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">吹牛指数</el-tag></span>
        <el-rate v-model="astro.businessLevel" disabled show-score text-color="#ff9900" score-template="{value}"/>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.boyLevel" :content-style="{'text-align': 'left'}" label="男生指数">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">男生指数</el-tag></span>
        <el-rate v-model="astro.boyLevel" disabled show-score text-color="#ff9900" score-template="{value}"/>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.girlLevel" :content-style="{'text-align': 'left'}" label="女生指数">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">女生指数</el-tag></span>
        <el-rate v-model="astro.girlLevel" disabled show-score text-color="#ff9900" score-template="{value}"/>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.luckyColor" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="幸运颜色">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">幸运颜色</el-tag></span>
        <span> {{ astro.luckyColor }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.luckyNumber" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="幸运数字">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">幸运数字</el-tag></span>
        <span> {{ astro.luckyNumber }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.matchAstro" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="最佳搭档">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">最佳搭档</el-tag></span>
        <span> {{ astro.matchAstro }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.luckyAstro" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="福星">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">福星</el-tag></span>
        <span> {{ astro.luckyAstro }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.dangerAstro" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="你不要过来啊">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">你不要过来啊</el-tag></span>
        <span> {{ astro.dangerAstro }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.shortComment" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="短评" span="3">
        <span slot="label"><el-tag type="success" effect="plain" style="font-weight: 500; font-size: 20px">短评</el-tag></span>
        <span> {{ astro.shortComment }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.generalContent" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="综合运势" span="3">
        <span slot="label"><el-tag type="primary" effect="plain" style="font-weight: 500; font-size: 20px">综合运势</el-tag></span>
        <span> {{ astro.generalContent }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.loveContent" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="爱情运势" span="3">
        <span slot="label"><el-tag type="primary" effect="plain" style="font-weight: 500; font-size: 20px">爱情运势</el-tag></span>
        <span> {{ astro.loveContent }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.careerContent" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="事业运势" span="3">
        <span slot="label"><el-tag type="primary" effect="plain" style="font-weight: 500; font-size: 20px">事业运势</el-tag></span>
        <span> {{ astro.careerContent }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.richContent" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="财富运势" span="3">
        <span slot="label"><el-tag type="primary" effect="plain" style="font-weight: 500; font-size: 20px">财富运势</el-tag></span>
        <span> {{ astro.richContent }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.healthContent" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="健康运势" span="3">
        <span slot="label"><el-tag type="primary" effect="plain" style="font-weight: 500; font-size: 20px">健康运势</el-tag></span>
        <span> {{ astro.healthContent }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.relaxTip" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="放松方式" span="3">
        <span slot="label"><el-tag type="primary" effect="plain" style="font-weight: 500; font-size: 20px">放松方式</el-tag></span>
        <span> {{ astro.relaxTip }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.luckyTip" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="开运小技巧" span="3">
        <span slot="label"><el-tag type="primary" effect="plain" style="font-weight: 500; font-size: 20px">开运小技巧</el-tag></span>
        <span> {{ astro.luckyTip }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.boyContent" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="男生运势" span="3">
        <span slot="label"><el-tag type="primary" effect="plain" style="font-weight: 500; font-size: 20px">男生运势</el-tag></span>
        <span> {{ astro.boyContent }} </span>
      </el-descriptions-item>
      <el-descriptions-item v-if="astro.girlContent" :content-style="{'text-align': 'left', 'font-weight': '800', 'font-size': '22px'}" label="女生运势" span="3">
        <span slot="label"><el-tag type="primary" effect="plain" style="font-weight: 500; font-size: 20px">女生运势</el-tag></span>
        <span> {{ astro.girlContent }} </span>
      </el-descriptions-item>

    </el-descriptions>
  </div>
</template>

<script>

import astroApi from '../../api/astroApi'

export default {
  name: 'Astro',
  data() {
    return {
      contentLoading: false,
      astroName: 'libra',
      astroDay: 'today',
      astro: null,
      astroVisable: true,
      astroOptions: [
        {
          'label': '白羊座',
          'time': '3月21日 - 4月19日',
          'value': 'aries'
        },
        {
          'label': '金牛座',
          'time': '4月20日 - 5月20日',
          'value': 'taurus'
        },
        {
          'label': '双子座',
          'time': '5月21日 - 6月21日',
          'value': 'gemini'
        },
        {
          'label': '巨蟹座',
          'time': '6月22日 - 7月22日',
          'value': 'cancer'
        },
        {
          'label': '狮子座',
          'time': '7月23日 - 8月22日',
          'value': 'leo'
        },
        {
          'label': '处女座',
          'time': '8月23日 - 9月22日',
          'value': 'virgo'
        },
        {
          'label': '天秤座',
          'time': '9月23日 - 10月23日',
          'value': 'libra'
        },
        {
          'label': '天蝎座',
          'time': '10月24日 - 11月22日',
          'value': 'scorpio'
        },
        {
          'label': '射手座',
          'time': '11月23日 - 12月21日',
          'value': 'sagittarius'
        },
        {
          'label': '摩羯座',
          'time': '12月22日 - 1月19日',
          'value': 'capricorn'
        },
        {
          'label': '水瓶座',
          'time': '1月20日 - 2月18日',
          'value': 'aquarius'
        },
        {
          'label': '双鱼座',
          'time': '2月19日 - 3月20日',
          'value': 'pisces'
        }
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getAstro()
    },
    getAstro() {
      const params = {
        day: this.astroDay,
        astroName: this.astroName
      }
      this.contentLoading = true
      astroApi.getData(params)
        .then(res => {
          this.contentLoading = false
          this.astro = res.data
        }).catch(res => {
          this.contentLoading = false
        })
    }
  }
}
</script>

<style scoped>

</style>
